<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no" />
		<title>video_details</title>
		<link rel="stylesheet" type="text/css" href="boot/dist/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/video_details.css" />

		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.bundle.min.js"></script>
		<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.js"></script>
	</head>
	<body>
		<div class="header1">
			<div class="container">
				<div class="row">
					<div class="col-lg-2 col-12 text-center py-4 h_py">
						<a href="javascript:;">
							<img src="img/logo-header-06.png">
						</a>
					</div>
					<div class="col-lg-6 col-12 py-4 h_py1">
						<form class="h_col form-control border d-flex justify-content-between align-items-center rounded-pill" style=" height: 50px;">
							<!--2.2设置菜单项  nav-item 下拉菜单的区域 dropdown-->
							<span class="nav-item dropdown h_w">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link h_bor" data-toggle="dropdown">MOVIES<i class="fa fa-angle-down pl-2"></i></a>

								<!--2.设置下拉菜单-->
								<span class="dropdown-menu h_coll">
									<a href="#" class="dropdown-item">HOME</a>
									<a href="#" class="dropdown-item">VIDEOS</a>
									<a href="#" class="dropdown-item">FEATURES</a>
									<a href="#" class="dropdown-item">BLOG</a>
									<a href="#" class="dropdown-item">CONTACT</a>
								</span>

							</span>
							<input type="text" placeholder="Search for a Movie..." class="border-0 w-75 pl-4 h_input" style="outline: none;">
							<button type="" class="border-0 btn"><i class="fa fa-search h_btn"></i></button>
						</form>
					</div>
					<div class="col-lg-4 col-12 py-4 d-flex align-items-center h_ul">
						<ul class="list-unstyled mb-0 d-flex justify-content-around j align-items-center w-100">
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-facebook fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-twitter fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-vimeo fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-youtube-play fa_h"></i></a>
							</li>
							<a href="javascript:;" class="m_a rounded-pill">SUBMIT&nbsp;VIDEO</a>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="h_nav h-auto py-2 ">
			<!-- navbar-expand-md -->
			<div class="container d-flex justify-content-between align-items-center h_a">
				<div class="navbar p-0 navbar-expand-md h_center">
					<button type="button" class="btn navbar h_btnbg" data-toggle="collapse" data-target="#meu">
						<i class="fa fa-bars"></i>
					</button>
					<i class="border-right mx-3 h_hr" style="height: 30px;"></i>
					<div class="collapse navbar-collapse" id="meu">
						<ul class="nav list-unstyled d-flex text-center mx-auto justify-content-around justify-content-center navbar-nav h_bgg">
							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">MOME</a>
								<span class="nav-item dropdown float-left w-100">
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="index.html" class="dropdown-item">index</a>
									</span>
								</span>
							</li>

							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">MOVIE</a>
								<span class="nav-item dropdown float-left w-100 ">

									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="shop.html" class="dropdown-item">Shop</a>
										<a href="shop_details.html" class="dropdown-item">shop_details</a>
									</span>

								</span>
							</li>

							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">VIDEOS</a>
								<span class="nav-item dropdown float-left w-100">

									<!--2.设置下拉菜单-->
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="video.html" class="dropdown-item">Video</a>
										<a href="video_details.html" class="dropdown-item">video_details</a>
									</span>
								</span>
							</li>

							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">FEATURES</a>
								<span class="nav-item dropdown float-left w-100">

									<!--2.设置下拉菜单-->
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="about.html" class="dropdown-item">About</a>
										<a href="submit.html" class="dropdown-item">Submit</a>
										<a href="authors.html" class="dropdown-item">list_authors</a>
										<a href="authors_details.html" class="dropdown-item">authors_details</a>
									</span>
								</span>
							</li>

							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">BLOG</a>
								<span class="nav-item dropdown float-left w-100">

									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="blog.html" class="dropdown-item">Blog</a>
										<a href="blog_details.html" class="dropdown-item">blog_detail</a>

									</span>
								</span>
							</li>

							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">CONTACT</a>
								<span class="nav-item dropdown float-left w-100">

									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="contact.html" class="dropdown-item">CONTACT</a>
									</span>
								</span>
							</li>
						</ul>
					</div>

				</div>
				<!-- 两个图标 -->
				<div class="h_a">
					<a href="javascript:;">
						<i class="fa fa-cloud-upload"></i>
						<span>SUBMIT VIDED</span>
					</a>
					<i class="border-right mx-3"></i>
					<a href="javascript:;">
						<i class="fa fa-user"></i>
						<span>IOGIN</span>
					</a>
				</div>
			</div>
		</div>
		<!-- 顶部导航栏区域 -->
		<div style="background: url(img/bg-page-title-04.jpg) no-repeat; background-size: cover; height: 500px;" class="h_img">

			<div style="background-color: rgba(0,0,0,0.5); height: 500px;">
				<!-- 文字区域 -->
				<p align="center" class="" style="font-size: 35px; color: white; padding-top: 150px;">Modern warfare (2018)</p>
				<p align="center" class="" style="color: gray;">To start the day in the bost wat，onjoythe extraordlinary<br />buffotbrekfast
					in the our courtyard caressed</p>

			</div>
		</div>

		<!-- 中部区域 -->
		<div class="bg-white py-5" id="mbg">
			<div class="container">
				<ul class="list-unstyled row">

					<li class="col-lg-3 col-12 py-5 ">
						<div class="position-sticky sticky-top" style="box-shadow: 0px 0px 10px gray; padding: 15px 15px 15px 15px;">
							<div class="overflow-hidden m_pp">
								<img src="img/product-05.jpg" class="w-100 m_imgaa">
								<img src="img/star-01.png" class="m_img_pnga">
								<span class="text-white m_size_55">5</span>
								<h5 class="m_img_houu text-white">IMDb</h5>
								<span class="m_img_paa text-white">Trend</span>
								<p class="m_po mb-0 w-100 d-flex align-content-center" style="color: white; background-color: rgba(0,0,0,0.8); padding: 10px 0px 10px 0px;">Rating:<i
									 class="fa fa-star text-warning px-2 py-1"></i>8/10<i class="fa fa-google-plus pl-3 py-1 text-warning"></i>&nbsp;240&nbsp;Views</p>
							</div>

							<!-- 下方介绍区域 -->
							<ul class="list-unstyled py-3">
								<li class="d-flex justify-content-between py-1">
									<span style="font-weight: bold;">Actors:</span>
									<span class="" style="color: gray;">Julia Toufis</span>
								</li>
								<li class="d-flex justify-content-between py-1">
									<span style="font-weight: bold;">Writer:</span>
									<span class="" style="color: gray;">Noah</span>
								</li>
								<li class="d-flex justify-content-between py-1">
									<span style="font-weight: bold;">Release Date:</span>
									<span class="" style="color: gray;">May 12，2018</span>
								</li>
								<li class="d-flex justify-content-between py-1">
									<span style="font-weight: bold;">Genres:</span>
									<span class="" style="color: gray;">Action</span>
								</li>
								<li class="d-flex justify-content-between py-1">
									<span style="font-weight: bold;">Country:</span>
									<span class="" style="color: gray;">USA</span>
								</li>
								<li class="d-flex justify-content-between py-1">
									<span style="font-weight: bold;">Runtime:</span>
									<span class="" style="color: gray;">60 min</span>
								</li>
								<li class="d-flex justify-content-between py-1">
									<span style="font-weight: bold;">Longuage:</span>
									<span class="" style="color: gray;">English</span>
								</li>
								<li class="d-flex justify-content-between py-1">
									<span style="font-weight: bold;">Type:</span>
									<span class="" style="color: gray;">Short</span>
								</li>

							</ul>

							<!--  -->
							<div class="py-3">
								<a href="javascript:;" class="m_a rounded-pill ">WATCH&nbsp;VIDEO</a>
							</div>
						</div>
					</li>

					<!-- 右边区域 -->
					<li class="col-lg-9 col-12 py-5">
						<h5>MOVIE STORY</h>
							<!--  -->
							<p style="color: gray; font-weight: normal;" class="py-4">
								Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
								magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
								consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
								pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
								laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
								totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
							</p>

							<p style="color: gray; font-weight: normal;" class="">
								Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia magni dolores eos qui
								ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
								consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
								quaerat voluptatem.
							</p>

							<h5 class="py-4">VIDEO&nbsp;&&nbsp;PHOTO</h5>
							<!-- 大图片区域 -->
							<div class="overflow-hidden my-4 m_da">
								<img src="img/single-blog-01.jpg" class="w-100 m_daimg" />
								<p style="color: white; " class="m_size_o">08</p>
								<p style="color: white;" class="m_size_oo">AUG，2018</p>
							</div>

							<!-- 文字区域 -->
							<p style="color: gray;">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
								magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
								sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
								magnam aliquam quaerat voluptatem.</p>
							<div class="d-flex justify-content-between pt-3 pb-5">
								<h6 class="py-2 mb-0">TAGS:<span class="pl-3 font-weight-normal" style="color: red;">film maker， film studio</span></h6>
								<ul class="list-unstyled mb-0 d-flex justify-content-around j align-items-center">
									<li>
										<h6 class="mb-0">SHARW:</h6>
									</li>
									<li>
										<i class="fa fa-facebook mx-2 text-danger"></i>
									</li>
									<li>
										<i class="fa fa-twitter mx-2 text-danger"></i>
									</li>
									<li>
										<i class="fa fa-vimeo mx-2 text-danger"></i>
									</li>
									<li>
										<i class="fa fa-youtube-play mx-2 text-danger"></i>
									</li>

								</ul>
							</div>

							<!-- 人物评论区域 -->
							<div class="py-2 border">
								<ul class="list-unstyled row">
									<li class="col-lg-4 col-12 py-5">
										<p align="center"><img src="img/ava-02.jpg" height="150" width="150" class=""></p>
										<p align="center">
											<ul class="list-unstyled mb-0 d-flex justify-content-around j align-items-center mx-auto" style="width: 70%;">
												<li>
													<a href="javascript:;" class="a_rounded"><i class="fa fa-facebook fa_h"></i></a>
												</li>
												<li>
													<a href="javascript:;" class="a_rounded"><i class="fa fa-twitter fa_h"></i></a>
												</li>
												<li>
													<a href="javascript:;" class="a_rounded"><i class="fa fa-vimeo fa_h"></i></a>
												</li>

											</ul>
										</p>
									</li>
									<li class="col-lg-8 col-12 py-5">
										<h5>Michael Mikado</h5>
										<p style="color: gray;" class="mb-0">Front-end dev</p>
										<!-- 文字区域 -->
										<p style="color: gray;" class="py-3">If you are a newbie to managing a WordPress website，then
											congratulatuations! You are here at the right track with us because we are going to introduce you one of the
											most basic knowledge when owning a WordPress page:how to find your site</p>
									</li>
								</ul>
							</div>

							<!-- 两个按钮 -->
							<ul class="list-unstyled row py-3 m-0">
								<li class="col-lg-6 col-12 py-5 border">
									<div class="row">
										<div class="col-3 ">
											<a href="javascript:;" class="a_roundedl"><i class="fa fa-arrow-left fa_hl"></i></a>
										</div>
										<div class="col-9">
											<h5 style="color: red;" class="text-right">PRWVIOUS</h5>
											<h5 class="text-right">Exploring the New Youk</h5>
											<p class="text-right" style="color: gray;">October 15，2018</p>
										</div>
									</div>
								</li>
								<li class="col-lg-6 col-12 py-5 border">
									<div class="row">
										<div class="col-9">
											<h5 style="color: red;" class="text-left">PRWVIOUS</h5>
											<h5 class="text-left">Exploring the New Youk</h5>
											<p class="text-left" style="color: gray;">October 15，2018</p>
										</div>
										<div class="col-3 ">
											<a href="javascript:;" class="a_roundedl"><i class="fa fa-arrow-right fa_hl"></i></a>
										</div>
									</div>
								</li>
							</ul>

							<!-- 下方评论区域 -->
							<h5 class="pt-5">2 COMMENTS</h5>
							<!--  -->
							<hr style="color: gray;" class="py-3" />

							<ul class="list-unstyled row">
								<li class="col-lg-2 col-12">
									<img src="img/ava-01.jpg" />
								</li>
								<li class="col-lg-10 col-12">
									<div class="d-flex justify-content-between">
										<span>Edugate</span>
										<span><a href="javascript:;" style="color: red; text-decoration: underline;">Roply</a></span>
									</div>
									<p style="color: gray;">November 11，2016 at 9:10 AM</p>
									<p style="color: gray;">So far，the conversion increase is more due to plain force，but the quality of boss
										conversions and subsequent leads can be increased</p>
								</li>
							</ul>

							<!-- 线 -->
							<p style="border-top: 2px gray dashed;" class="my-5"></p>

							<!--  -->
							<ul class="list-unstyled row">
								<li class="col-lg-2 col-12">

								</li>
								<li class="col-lg-2 col-12">
									<img src="img/ava-01.jpg" />
								</li>
								<li class="col-lg-8 col-12">
									<div class="d-flex justify-content-between">
										<span>Edugate</span>
										<span><a href="javascript:;" style="color: red; text-decoration: underline;">Roply</a></span>
									</div>
									<p style="color: gray;">November 11，2016 at 9:10 AM</p>
									<p style="color: gray;">So far，the conversion increase is more due to plain force，but the quality of boss
										conversions and subsequent leads can be increased</p>
								</li>
							</ul>

							<!-- 评论 -->
							<h5 class="py-4">LEAVE A COMMENT</h5>

							<hr style="color: gray;" class="py-3" />

							<!--  -->
							<p style="color: gray; font-size: 20px;">Your email address will not be published.Required fields are marked*</p>

							<ul class="list-unstyled row">
								<li class="col-lg-6 col-12 py-3">
									<input type="text" placeholder="Your Name*" class="pl-2 w-100 py-2" style="outline: none; color: gray;" />
								</li>
								<li class="col-lg-6 col-12 py-3">
									<input type="text" placeholder="Email*" class="pl-2 w-100 py-2" style="outline: none; color: gray;" />
								</li>

								<li class="col-12 py-3">
									<textarea rows="8" class="w-100 pl-2" placeholder="Enter your comment*" style="outline: none;"></textarea>
								</li>
								<li class="col-12 mb-5">
									<a href="javascript:;" class="m_a rounded-pill">SUBMIT&nbsp;COMMENT</a>
								</li>
							</ul>

							<!-- 轮播图区域 -->
							<div id="app">

								<div class=" d-flex justify-content-between flex-lg-row flex-column">
									<h4>You May Also Like</h4>

									<p>
										<button type="button" class="btn fa fa-angle-left videio_b" @click="typepaven"></button>
										<button type="button" class="btn fa fa-angle-right videio_b" @click="typeone"></button>
									</p>


								</div>
								<hr style="color: gray;" class="" />

								<template v-if="type==1">
									<div class="row">
										<div class="col-lg-4 col-md-6 col-12  py-4">
											<div class="divv overflow-hidden">
												<img src="img/post-01.jpg" height="350" class="w-100 m_img_xiao" />
												<img src="img/star-01.png" class="x">
												<span class="text-white wu">5</span>
												<h5 class="h text-white">IMDb</h5>
												<span class="aa text-white">Hot</span>
												<div class="m_img_bg_col"></div>
												<img src="img/icon-play-01.png" class="m_img_bo">
											</div>
											<h5 class=" text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											<p class="text-center py-1 m_p">ACTION，DRAMA</p>
										</div>
										<div class="col-lg-4 col-md-6 col-12  py-4">
											<div class="divv overflow-hidden">
												<img src="img/post-02.jpg" height="350" class="w-100 m_img_xiao" />
												<img src="img/star-01.png" class="x">
												<span class="text-white wu">5</span>
												<h5 class="h text-white">IMDb</h5>
												<span class="aa text-white">Hot</span>
												<div class="m_img_bg_col"></div>
												<img src="img/icon-play-01.png" class="m_img_bo">
											</div>
											<h5 class=" text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											<p class="text-center py-1 m_p">ACTION，DRAMA</p>
										</div>
										<div class="col-lg-4 col-md-6 col-12  py-4">
											<div class="divv overflow-hidden">
												<img src="img/post-03.jpg" height="350" class="w-100 m_img_xiao" />
												<img src="img/star-01.png" class="x">
												<span class="text-white wu">5</span>
												<h5 class="h text-white">IMDb</h5>
												<span class="aa text-white">Hot</span>
												<div class="m_img_bg_col"></div>
												<img src="img/icon-play-01.png" class="m_img_bo">
											</div>
											<h5 class=" text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											<p class="text-center py-1 m_p">ACTION，DRAMA</p>
										</div>
										<!-- <div class="col-lg-3 col-md-6 col-12  py-4">
											<div class="divv overflow-hidden">
												<img src="img/post-04.jpg" height="350" class="w-100 m_img_xiao" />
												<img src="img/star-01.png" class="x">
												<span class="text-white wu">5</span>
												<h5 class="h text-white">IMDb</h5>
												<span class="aa text-white">Hot</span>
												<div class="m_img_bg_col"></div>
												<img src="img/icon-play-01.png" class="m_img_bo">
											</div>
											<h5 class="text-white text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											<p class="text-center py-1 m_p">ACTION，DRAMA</p>
										</div> -->
									</div>
								</template>
								<template v-if="type==2">
									<div class="row">
										<div class="col-lg-4 col-md-6 col-12  py-4">
											<div class="divv overflow-hidden">
												<img src="img/post-05.jpg" height="350" class="w-100 m_img_xiao" />
												<img src="img/star-01.png" class="x">
												<span class="text-white wu">5</span>
												<h5 class="h text-white">IMDb</h5>
												<span class="aa text-white">Hot</span>
												<div class="m_img_bg_col"></div>
												<img src="img/icon-play-01.png" class="m_img_bo">
											</div>
											<h5 class=" text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											<p class="text-center py-1 m_p">ACTION，DRAMA</p>
										</div>
										<div class="col-lg-4 col-md-6 col-12  py-4">
											<div class="divv overflow-hidden">
												<img src="img/post-06.jpg" height="350" class="w-100 m_img_xiao" />
												<img src="img/star-01.png" class="x">
												<span class="text-white wu">5</span>
												<h5 class="h text-white">IMDb</h5>
												<span class="aa text-white">Hot</span>
												<div class="m_img_bg_col"></div>
												<img src="img/icon-play-01.png" class="m_img_bo">
											</div>
											<h5 class=" text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											<p class="text-center py-1 m_p">ACTION，DRAMA</p>
										</div>
										<div class="col-lg-4 col-md-6 col-12  py-4">
											<div class="divv overflow-hidden">
												<img src="img/post-07.jpg" height="350" class="w-100 m_img_xiao" />
												<img src="img/star-01.png" class="x">
												<span class="text-white wu">5</span>
												<h5 class="h text-white">IMDb</h5>
												<span class="aa text-white">Hot</span>
												<div class="m_img_bg_col"></div>
												<img src="img/icon-play-01.png" class="m_img_bo">
											</div>
											<h5 class=" text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											<p class="text-center py-1 m_p">ACTION，DRAMA</p>
										</div>
										<!-- <div class="col-lg-3 col-md-6 col-12  py-4">
											<div class="divv overflow-hidden">
												<img src="img/post-08.jpg" height="350" class="w-100 m_img_xiao" />
												<img src="img/star-01.png" class="x">
												<span class="text-white wu">5</span>
												<h5 class="h text-white">IMDb</h5>
												<span class="aa text-white">Hot</span>
												<div class="m_img_bg_col"></div>
												<img src="img/icon-play-01.png" class="m_img_bo">
											</div>
											<h5 class="text-white text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											<p class="text-center py-1 m_p">ACTION，DRAMA</p>
										</div> -->
									</div>
								</template>
								<template v-if="type==3">
									<div class="row">
										<div class="col-lg-4 col-md-6 col-12  py-4">
											<div class="divv overflow-hidden">
												<img src="img/post-09.jpg" height="350" class="w-100 m_img_xiao" />
												<img src="img/star-01.png" class="x">
												<span class="text-white wu">5</span>
												<h5 class="h text-white">IMDb</h5>
												<span class="aa text-white">Hot</span>
												<div class="m_img_bg_col"></div>
												<img src="img/icon-play-01.png" class="m_img_bo">
											</div>
											<h5 class=" text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											<p class="text-center py-1 m_p">ACTION，DRAMA</p>
										</div>
										<div class="col-lg-4 col-md-6 col-12  py-4">
											<div class="divv overflow-hidden">
												<img src="img/post-10.jpg" height="350" class="w-100 m_img_xiao" />
												<img src="img/star-01.png" class="x">
												<span class="text-white wu">5</span>
												<h5 class="h text-white">IMDb</h5>
												<span class="aa text-white">Hot</span>
												<div class="m_img_bg_col"></div>
												<img src="img/icon-play-01.png" class="m_img_bo">
											</div>
											<h5 class=" text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											<p class="text-center py-1 m_p">ACTION，DRAMA</p>
										</div>
										<div class="col-lg-4 col-md-6 col-12  py-4">
											<div class="divv overflow-hidden">
												<img src="img/post-11.jpg" height="350" class="w-100 m_img_xiao" />
												<img src="img/star-01.png" class="x">
												<span class="text-white wu">5</span>
												<h5 class="h text-white">IMDb</h5>
												<span class="aa text-white">Hot</span>
												<div class="m_img_bg_col"></div>
												<img src="img/icon-play-01.png" class="m_img_bo">
											</div>
											<h5 class=" text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											<p class="text-center py-1 m_p">ACTION，DRAMA</p>
										</div>
										<!-- <div class="col-lg-3 col-md-6 col-12  py-4">
											<div class="divv overflow-hidden">
												<img src="img/post-12.jpg" height="350" class="w-100 m_img_xiao" />
												<img src="img/star-01.png" class="x">
												<span class="text-white wu">5</span>
												<h5 class="h text-white">IMDb</h5>
												<span class="aa text-white">Hot</span>
												<div class="m_img_bg_col"></div>
												<img src="img/icon-play-01.png" class="m_img_bo">
											</div>
											<h5 class="text-white text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											<p class="text-center py-1 m_p">ACTION，DRAMA</p>
										</div> -->
									</div>
								</template>
							</div>
					</li>
				</ul>
				</li>


				</ul>
			</div>
		</div>

		<!-- 底部区域 -->
		<div class="py-5 " style="background-color : #000000;">
			<div class="container">
				<div class="row">
					<div class="col-lg-5 col-12 py-5 text-center f_padd">
						<p align="center">
							<a href="javascript:;"><img src="./img/logo-header-05.png" class=""></a>
						</p>
						<p align="center" class="py-3" style="color: gray;">Lommode ligula eget dolor. Aenean meassa.Cum sociis que
							penatibus et
							magnis dis parturient montes lorenm，nascetur ridiculusmus. Donec quam felis， uitricies nex massa.Cum sociis...</p>
						<!-- 按钮组 -->

						<div class="btn-group pt-3" style="width: 85%;">
							<input type="text" placeholder="Email" style="width: 70%; background-color: #222222; border: 1px solid gray; color: gray; outline: none;">
							<button class="btn text-white font-weight-bold" style="background-color: red;">SUBSCRIBE</button>
						</div>
						<!-- 图标区域 -->
						<ul class="list-unstyled mb-0 d-flex justify-content-around j align-items-center mx-auto py-5" style="width: 70%;">
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-facebook fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-twitter fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-vimeo fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-youtube-play fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-google-plus fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-file-movie-o fa_h"></i></a>
							</li>
						</ul>
					</div>
					<div class="col-lg-4 col-12 py-5 f_padd_2">
						<div class="row">
							<div class="col-12">
								<h5 class="text-white">LATEST POSTS</h5>
							</div>
						</div>
						<div class="row">
							<div class="col-4 py-3">
								<div class="overflow-hidden">
									<img src="img/png-post-01.png" class="w-100 m_img_xiao">
								</div>
							</div>
							<div class="col-8 py-3">
								<p class="text-white mb-0" style="line-height: 22px;">5 Skin Care Rituals You Should Be Doing Before Bed</p>
								<p style="color: gray;">August 11，2018</p>
							</div>
						</div>
						<div class="row">
							<div class="col-4  py-3">
								<div class="overflow-hidden">
									<img src="img/png-post-02.png" class="w-100 m_img_xiao">
								</div>
							</div>
							<div class="col-8 py-3">
								<p class="text-white mb-0" style="line-height: 22px;">Fashion Outfit Ideas to Try From lnstagram This Week</p>
								<p style="color: gray;">August 11，2018</p>
							</div>
						</div>
						<div class="row">
							<div class="col-4 py-3">
								<div class="overflow-hidden">
									<img src="img/png-post-03.png" class="w-100 m_img_xiao">
								</div>
							</div>
							<div class="col-8 py-3">
								<p class="text-white mb-0" style="line-height: 22px;">7 Soaps to Supercharge Your Daily Skincare Routine</p>
								<p style="color: gray;">August 11，2018</p>
							</div>
						</div>
					</div>
					<div class="col-lg-3 col-12 py-5 f_padd_3">
						<h5 class="text-white">POPULAR CATEGORY</h5>
						<ul class="list-unstyled py-3">
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Fragrances</span>
								<span class="text-white">15</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Hair Care</span>
								<span class="text-white">12</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Make Up</span>
								<span class="text-white">6</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Outfits</span>
								<span class="text-white">9</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Skin Care</span>
								<span class="text-white">10</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Style</span>
								<span class="text-white">8</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Fashion</span>
								<span class="text-white">5</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Lifestyle</span>
								<span class="text-white">2</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Weliness</span>
								<span class="text-white">3</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="py-4 border-top text-center" style="border-color: gray !important; background-color: #000000;">
			<p style="color: gray;" class="mb-0">Copyright 2018 Carporate WordPress Theme Theme by <span><a href="javascript:;"
					 style="color: red; text-decoration: none;">ThimPress</a></span></p>
		</div>
		<!--  -->
		<div class="back">返回顶部</div>
	</body>
</html>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(function() {
		$(document).scrollTop();
		//1.被卷去的头部
		var boxTop = $('#mbg').offset().top;
		$(window).scroll(function() {
			// console.log(11);
			console.log($(document).scrollTop());

			if ($(document).scrollTop() >= boxTop) {
				$('.back').fadeIn();
			} else {
				$('.back').fadeOut();
			}
		})

		//返回顶部
		$('.back').click(function() {
			// $(document).scrollTop(0);
			$('body,html').stop().animate({
				scrollTop: 0
			})
		})
	})
</script>